<template>
	<!-- 经典组合 -->
	<view>
		<global-navgation  title="经典组合"></global-navgation>
		<view class="top">
			<image src="../../static/images/57.png" mode=""></image>
			<input class="search" placeholder="请输入关键字搜索">
			
			
			</input>
		</view>
		<view class="list" @click="details(item.id)"  v-for="(item,index) in lists"  >
			<image :src="item.cover_img" mode=""></image>
			<text class="text1">{{item.title}}</text>
			<text class="text2">{{item.sub_title}}</text>
		</view>
		<!-- <view class="list" @click="details">
			<image src="" mode=""></image>
			<text class="text1">经典组合商品标题</text>
			<text class="text2">由各种物质组成的巨型球状天体，叫做星球，星球有一定形状。</text>
		</view> -->
	</view>
</template>
<script>
	import globalNavgation from '../../components/globalNavgation.vue'
	
	export default{
		components:{
			globalNavgation,
			
		},
		data(){
			return{
				lists:[],
				list:[],
				tokens:""
			}
		},
		mounted() {
			// 初始化获取数据
			this.__initClassData()			
		},
		onLoad(){
			uni.getStorage({
			    key: 'token',
			    success:  res=> {
					this.tokens=res.data
					console.log('mmm',this.tokens)
			    }
			});
		},
		methods: {
			
			__initClassData() {
				this.$api.get({
					url: '/article/article/combination_list',
					data:{token:this.tokens}
				}).then(res => {
						this.lists=res.data
						
						
						console.log(res.data)
					})
				},
		details(e){
			
			// alert(123)
			
			this.$api.get({
				url: '/article/article/combination_info',
				data:{id:e,token:'os2rftxaXgM0vWL1QzOH'}
			}).then(res => {
			this.list=res.data
			console.log(1,res.data)
			uni.navigateTo({
				// 将要传的值给info
				url:'../details1/details1?info='+JSON.stringify(this.list),
				
			})
			// console.log(res.data)
				})
		}
		}
	}
</script>
<style>
	.top{
		width: 100%;
		height: 108rpx;
		background: #F7F7F7;
		position: relative;
	}
	.top .search {
		width: 686rpx;
		height: 68rpx;
		position: absolute;
		top: 20rpx;
		left: 32rpx;
		background: #FFFFFF;
		border: 1px solid rgba(151, 151, 151, 0.1);
		box-sizing: border-box;
		border-radius: 16rpx;
		background-origin: content-box;
		text-indent: 72rpx;
/* 		background: url(../../static/images/57.png) no-repeat 36rpx 22rpx;
		background-size: 24rpx 24rpx;
		background-position: left; */
		
	}
	.top image{
		width: 24rpx;
		height: 24rpx;
		position: absolute;
		top: 42rpx;
		left: 68rpx;
		z-index: 2;
	}
	.list .text1{
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 800;
		font-size: 36rpx;
		line-height: 50rpx;
		height: 50rpx;
		position: absolute;
		top:30rpx;
		left: 206rpx;
		color: rgba(0, 0, 0, 0.85);
	}
	.list .text2{
		width: 512rpx;
		height: 80rpx;
		position: absolute;
		top: 96rpx;
		left: 206rpx;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: normal;
		font-size: 28rpx;
		line-height: 40rpx;
		color: rgba(0, 0, 0, 0.45);
		
	}
	.list{
		width: 750rpx;
		height: 206rpx;
		position: relative;
	}
	.list image{
		width: 150rpx;
		height: 150rpx;
		position: absolute;
		top: 28rpx;
		left: 32rpx;
	}
</style>